﻿<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Demo::Menu::</title>
    <link rel="stylesheet" type="text/css" href="../main.css">
    <script src="../../release/jskit.core.js">
    </script>
    <script src="../JskitConfig_doc.js">
    </script>
    <script>
        var flyer = new JskitEffects.Flyer("flyer");
        flyer.set("banner");
        function doReset(){
            var _speed = $$("#speed").value;
            if(isNaN(parseInt(_speed))){
                alert("错误格式的Speed");
                return;
            }
            var _xstep = $$("#xstep").value;
            if(isNaN(parseFloat(_xstep))){
                alert("错误格式的xstep");
                return;
            }
            var _ystep = $$("#ystep").value;
            if(isNaN(parseFloat(_ystep))){
                alert("错误格式的ystep");
                return;
            }
            flyer.setSpeed(_speed);
            flyer.setXStep(_xstep);
            flyer.setYStep(_ystep);
            flyer.pause();
            flyer.start();
        }
    </script>

</head>
<body onload="">
<table border="0" id="Table1">
    <tbody>
    <tr>
        <td class="package">
            JskitEffects.js DEMO
        </td>
    </tr>
    <tr>
        <td class="content"><a href="../tutorial/JskitEffects.html">查看JskitEffects.js参考</a></td>
    </tr>
    <tr>
        <td class="title">
            飘动的对象
        </td>
    </tr>
    <tr>
        <td class="content">
            <div>
                <input type="text" id="speed" value="990"/>
                <input type="text" id="xstep" value="2"/>
                <input type="text" id="ystep" value="2"/>
                <input type="button" value="Change" onclick="doReset()" />
                </div>
            引入必须的文件
            <textarea name="JskitSyntax_code" class="html">
                &lt;head&gt;
                &lt;--// import javascript files --&gt;
                &lt;script src="$JSKIT_PATH$/base/JskitBase.js"&gt;&lt;/script&gt;
                &lt;script src="$JSKIT_PATH$/base/JskitUtil.js"&gt;&lt;/script&gt;
                &lt;script src="$JSKIT_PATH$/base/JskitEvents.js"&gt;&lt;/script&gt;
                &lt;script src="$JSKIT_PATH$/ui/JskitEffects.js"&gt; &lt;/script&gt;
                &lt;/head&gt;
            </textarea>
            初始化flyer对象
            <textarea name="JskitSyntax_code" class="html">
&lt;script&gt;
var flyer = new JskitEffects.Flyer("flyer");
//参数：
//1.漂浮对象的ID
//2.移动的速度,缺省为990
//3.横向移动的步长,单位为像素,缺省为2
//4.纵向移动的步长,单位为像素,缺省为2
flyer.set("banner", 100, 10, 10);
&lt;/script&gt;
            </textarea>
            设置要飘动的对象
            <textarea name="JskitSyntax_code" class="html">
                &lt;div id="banner" style="width:100px;height:100px;background-color:#ff0000"&gt;asdfasfasd
                    &lt;button onclick="flyer.stop()"&gt;close&lt;/button&gt;
                &lt;/div&gt;
                &lt;script&gt;flyer.start();&lt;/script&gt;
            </textarea>
        </td>
    </tr>
    <tr>
        <td>
            <div id="banner" style="width:100px;height:100px;background-color:#ff0000">
                xxxxxx
                <br>xxxxxx
                <br>xxxxxx
                <br>xxxxxx
                                        <br><button onclick="flyer.stop()">close</button>
            </div>
            <script>flyer.start();</script>
        </td>
    </tr>
    </tbody>
</table>
</body>
</html>
